<template>
    <div style="padding: 0 24px 12px 24px; width: 100%; height: 100%">
        <a-row style="width: 100%; height: 100%; position: relative">
            <a-col :span="8">
                <flexbox justify="center" style="box-sizing: border-box">
                    <flexbox direction="column" style="min-width: 120px; height: 250px">
                        <div style="font-size: 14px; color: #505a6e; margin: 84px 0 12px 0">
                            <span class="font-w-b">业务需求</span>
                        </div>
                        <flexbox>
                            <flexbox direction="column" justify="center" align="center">
                                <span class="font-w-b" style="font-size: 20px; margin-bottom: 12px">{{ info[0].addCount }}</span>
                                <a-tag
                                    :color="info[0].addCount - info[0].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="info[0].lastAddCount && info[0].addCount != info[0].lastAddCount"
                                    style="border-radius: 10px"
                                >
                                    {{ info[0].addCount - info[0].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[0].lastAddCount
                                            ? (Math.abs(info[0].addCount - info[0].lastAddCount) / info[0].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                    <div style="width: 250px">
                        <h-pie-chart
                            :option="taskOption"
                            :defaultColor="[
                                '#1890FF',
                                '#F7B62A',
                                '#2FC25B',
                                '#13C2C2',
                                '#FB7555',
                                '#945FB9',
                                '#F279AB',
                                '#1E9493',
                                '#FF9845',
                                '#1AA5D7',
                            ]"
                        />
                    </div>
                </flexbox>
            </a-col>
            <a-col :span="8">
                <flexbox justify="center" style="box-sizing: border-box">
                    <flexbox direction="column" style="min-width: 120px; height: 250px">
                        <div style="font-size: 14px; color: #505a6e; margin: 84px 0 12px 0">
                            <span class="font-w-b">产品需求</span>
                        </div>
                        <flexbox>
                            <flexbox direction="column" justify="center">
                                <span class="font-w-b" style="font-size: 20px; margin-bottom: 12px">{{ info[1].addCount }}</span>
                                <a-tag
                                    :color="info[1].addCount - info[1].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="info[1].lastAddCount && info[1].addCount != info[1].lastAddCount"
                                    style="border-radius: 10px"
                                >
                                    {{ info[1].addCount - info[1].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[1].lastAddCount
                                            ? (Math.abs(info[1].addCount - info[1].lastAddCount) / info[1].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                    <div style="width: 250px">
                        <h-pie-chart
                            :option="proOption"
                            :defaultOption="defaultProOption"
                            :defaultColor="[
                                '#1890FF',
                                '#F7B62A',
                                '#2FC25B',
                                '#13C2C2',
                                '#FB7555',
                                '#945FB9',
                                '#F279AB',
                                '#1E9493',
                                '#FF9845',
                                '#1AA5D7',
                            ]"
                        />
                    </div>
                </flexbox>
            </a-col>
            <a-col :span="8">
                <flexbox justify="space-between" style="box-sizing: border-box">
                    <flexbox direction="column" style="min-width: 120px; height: 250px">
                        <div style="font-size: 14px; color: #505a6e; margin: 84px 0 0 0">
                            <span class="font-w-b">版本情况</span>
                        </div>
                    </flexbox>
                    <div style="width: 250px; height: 250px; padding-top: 72px; box-sizing: border-box">
                        <div>
                            已发布版本：<span class="font-w-b" style="font-size: 20px">{{ detail.releaseVersion.length }}</span>
                        </div>
                        <div class="margin-t-16">
                            进行中版本：<span class="font-w-b" style="font-size: 20px">{{ detail.processVersion.length }}</span>
                        </div>
                        <div class="margin-t-16">
                            进行中延期版本：<span class="font-w-b" style="font-size: 20px">{{ detail.processOverDueVersion.length }}</span>
                        </div>
                    </div>
                </flexbox>
            </a-col>
            <div style="position: absolute; left: 33%; top: 30px; width: 1px; height: 200px; border: 1px solid #edeff3"></div>
            <div style="position: absolute; left: 66%; top: 30px; width: 1px; height: 200px; border: 1px solid #edeff3"></div>
        </a-row>
    </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue/es';
import api from '@/api';
import store from '@/store';
import filters from '@/utils/filter';
import HPieChart from '@/views/energyManage/analysisReport/preview/Detail/components/HPieChart.vue';
import { defineComponent, reactive, toRefs, watch, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HPieChart
    },
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            taskOption: null,
            proOption: null,
            defaultProOption: { seriesName: '产品需求数量', title: '产品需求总数', numTotal: 0 }
        });
        // 获取业务需求
        const getTaskList = async () => {
            // let { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
            // let businessInfos = props.detail.businessInfos.filter((item) => {
            //     let time = new Date(item.issueCreateTime).getTime();
            //     return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
            // });
            // let { typeArr, dataArr } = getPieChartData(businessInfos, 'issueType');
            // state.taskOption = {
            //     typeArr,
            //     dataArr,
            //     seriesName: '业务需求数量',
            //     title: '业务需求总数',
            //     numTotal: businessInfos.length,
            // };

            const query = {
                ids: props.info[0].addIds
            };
            const { success, moule, errorMsg } = await api.pmpRequestInfoModel.findByIds(query);
            if (success) {
                if (moule.length) {
                    const { typeArr, dataArr } = getPieChartData(moule, 'requestType');
                    state.taskOption = {
                        typeArr,
                        dataArr,
                        seriesName: '业务需求数量',
                        title: '业务需求总数',
                        numTotal: moule.length
                    };
                } else {
                    state.taskOption = null;
                }
            } else {
                message.error(errorMsg);
            }
        };
        // 获取产品需求
        const getProList = async () => {
            // let { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
            // let productInfos = props.detail.productInfos.filter((item) => {
            //     let time = new Date(item.issueCreateTime).getTime();
            //     return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
            // });
            // console.log('产品需求', productInfos);
            // let { typeArr, dataArr } = getPieChartData(productInfos, 'issueType');
            // state.proOption = {
            //     typeArr,
            //     dataArr,
            //     seriesName: '产品需求数量',
            //     title: '产品需求总数',
            //     numTotal: productInfos.length,
            // };

            const query = {
                ids: props.info[1].addIds
            };
            const { success, moule, errorMsg } = await api.productRequireModel.findProductsByIds(query);
            if (success) {
                if (moule.length) {
                    const { typeArr, dataArr } = getPieChartData(moule, 'requireType');
                    state.proOption = {
                        typeArr,
                        dataArr,
                        seriesName: '产品需求数量',
                        title: '产品需求总数',
                        numTotal: moule.length
                    };
                } else {
                    state.proOption = null;
                }
            } else {
                message.error(errorMsg);
            }
        };
        // 外部jira转化成图表数据
        // const getPieChartData = (list, field) => {
        //     let typeArr: any = [];
        //     let dataArr: any = [];
        //     let group = {};
        //     list.forEach((item) => {
        //         group[item[field]] = group[item[field]] || { value: 0 };
        //         group[item[field]].value++;
        //     });
        //     let typesArr = Object.keys(group);
        //     typesArr.forEach((item) => {
        //         if (group[item] && group[item].value) {
        //             typeArr.push(item);
        //             dataArr.push({
        //                 value: group[item].value,
        //                 name: item,
        //             });
        //         }
        //     });
        //     return {
        //         dataArr,
        //         typeArr,
        //     };
        // };

        // 转化成图表数据
        const getPieChartData = (list, field) => {
            const typeArr: any = [];
            const dataArr: any = [];
            const group = {};
            list.forEach((item) => {
                group[item[field]] = group[item[field]] || { value: 0 };
                group[item[field]].value++;
            });
            store.getters.dicOptions[field].forEach((item) => {
                if (group[item.code] && group[item.code].value) {
                    typeArr.push(item.dimensionName);
                    dataArr.push({
                        value: group[item.code].value,
                        name: item.dimensionName
                    });
                }
            });
            return {
                dataArr,
                typeArr
            };
        };

        watch(
            () => props.detail,
            (n) => {
                console.log('detail', props.detail);
                // if (n.businessInfos && n.businessInfos.length) {
                //     getTaskList();
                // }
                getTaskList();
                // if (n.productInfos && n.productInfos.length) {
                //     getProList();
                // }
                getProList();
            },
            { deep: true, immediate: true }
        );

        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-tag) {
    margin-right: 0 !important;
}
</style>